<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>

    <style>

        .d1{
            width: 200px;
            height: 200px;
            background-color: cadetblue;

            /* 设置内边距，当前元素距离外边界的距离 */
            /*padding: 100px;*/

            /* 外边距 */
            margin: auto;

            /* 当前块级元素变成行级元素，它将丢失原来块级元素的特点，不能设置宽高 */
            /*display: inline;*/

            /* 当前元素变成行块级元素，既有块级元素特点，又具备行级元素的特点，不再独占一行 */
            /*display: inline-block;*/

            /* 若想要当前元素隐藏起来，并且丢失原来位置 */
            /*display: none;*/

            /* 若想要当前元素隐藏起来，并且不丢失原来位置 */
            /*visibility: hidden;*/
            /* 让当前元素可见 */
            /*visibility: visible;*/
        }


        .i1{
            /* 将原来的行级元素变成块级元素，可以设置宽高 */
            display: block;
            height: 30px;
        }


        .i2{
            line-height: 50px;
        }


    </style>

</head>
<body>

    <!-- 块级：满行（独占一行，默认） 可以控制宽度和高度 div p h1~h6 -->
    <h1>今天</h1>
    <p>明天</p>
    <p>后天</p>
    <div class="d d1"></div>

    <!-- 行内：内容撑开宽度，不可控制宽高，随内容改变，可以用行高line-height撑起来，但行标签img，textarea，input是可以设置宽和高并且有效的 -->
    <input type="text" class="i1"/>
    <input type="text" class="i2"/>

    <img src="../img/paris.jpg" width="64px" height="auto"/>

</body>
</html>